<template>
  <v-container class="ms-4 overflow-auto flex flex-col bg-white">
    <div class="shrink-0">
      <v-banner single-line>
        <div class="flex items-center">
          <span>{{ orgName }}</span>
          <span class="ms-2">分组共</span>
          <!-- <span>({{ projectNum }})</span> -->
          <span>个项目</span>
          <v-dialog v-model="createProjectVisible" max-width="600px">
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                v-bind="attrs"
                v-on="on"
                class="me-1 ms-auto"
                color="primary"
              >
                <span>创建接口</span>
              </v-btn>
            </template>
            <v-card class="p-4">
              <el-form
                ref="createApiForm"
                :model="createApiForm"
                label-position="left"
                label-width="80px"
                size="small"
              >
                <el-form-item label="接口名称">
                  <el-input v-model="createApiForm.summary"></el-input>
                </el-form-item>
                <el-form-item label="接口路径">
                  <div class="flex">
                    <el-select v-model="createApiForm.method">
                      <el-option
                        v-for="item in methodOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                    <el-input v-model="createApiForm.path"></el-input>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="text-right">
                    <el-button @click="onCreateApiDoc" type="success">创建</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </v-card>
          </v-dialog>
        </div>
      </v-banner>
    </div>
    <div>
      <!-- <v-data-table
        :server-items-length="apiStore.docTotal"
        @pagination="apiStore.fetchDocList"
        :page.sync="apiStore.docPageQuery.page"
        :headers="headers"
        :items="apiStore.docList"
        :items-per-page="apiStore.docPageQuery.pageSize"
      >
        <template v-slot:name="{ item }">
          <router-link :to="{ name: 'api-detail' }">{{
            item.name
          }}</router-link>
        </template>
      </v-data-table> -->
      <el-table :data="apiStore.docList" fit>
        <el-table-column label="接口名称" prop="summary" width="210">
          <template slot="header">
            <el-input
              v-model="docQuery.keywords"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <a @click="apiStore.navToApiPrev(scope.row.id)">{{
              scope.row.summary
            }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="接口路径"
          prop="path"
          width="350"
        ></el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          width="168"
        ></el-table-column>
        <el-table-column label="Tag" prop="tag"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="apiStore.fetchDocList"
        @current-change="apiStore.fetchDocList"
        :current-page.sync="apiStore.docPageQuery.page"
        :page-size.sync="apiStore.docPageQuery.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="apiStore.docTotal"
      >
      </el-pagination>
    </div>
  </v-container>
</template>

<script>
import { useApiStore } from "@/store/api";
import { reactive, ref } from "@vue/composition-api";
export default {
  data() {
    return {
      headers: [
        {
          text: "接口名称",
          value: "summary",
          width: 210,
        },
        { text: "接口路径", value: "path", width: 350 },
        { text: "接口分类", value: "tagId", width: 196 },
        { text: "状态", value: "status", width: 168 },
        { text: "Tag", value: "tag", width: 98 },
      ],
    };
  },
  setup() {
    const apiStore = useApiStore();
    const methodOptions = ["GET", "POST", "PUT"];
    const createApiForm = reactive({
      tagId: 0,
      summary: "",
      path: "",
      method: "GET",
    });
    const docQuery = reactive({
      keywords: '',
    })
    function fetchDocList() {
      apiStore.fetchDocList()
    }
    const createProjectVisible = ref(false)

    function onCreateApiDoc() {
      apiStore.createApiDoc(createApiForm)
        .then(() => {
          fetchDocList()
          createProjectVisible.value = false
        })
    }

    return {
      apiStore,
      createProjectVisible,
      createApiForm,
      methodOptions,
      docQuery,
      onCreateApiDoc
    };
  },
};
</script>

<style>
</style>